import About from "./pages/About"
import Home from "./pages/Home"
import Profile from "./pages/Profile"
import Category from "./pages/Category"
import store from "./store"
import "./style.css"

import React, { PureComponent } from "react"

export class App extends PureComponent {
    constructor() {
        super()
        this.state = {
            counter: store.getState().counter.counter,
        }
    }

    componentDidMount() {
        store.subscribe(() => {
            const state = store.getState().counter
            this.setState({ counter: state.counter })
        })
    }

    render() {
        const { counter } = this.state
        return (
            <div>
                <h2>App Counter：{counter}</h2>
                <div className="pages">
                    <Home></Home>
                    <Profile></Profile>
                    <About></About>
                    <Category></Category>
                </div>
            </div>
        )
    }
}

export default App
